<template>
  <div class="Mycollect">
    <van-tabs animated>
      <van-tab
        v-for="item in collects"
        :key="item.id"
        :title="item.titleMsg"
      >
        <!-- v-model="value" -->
        <van-search placeholder="请输入搜索关键词" />
        <div class="content">
          <div class="img-box">
            <img
              :src="item.img_url"
              alt=""
            />
          </div>
          <van-card
            price="2788"
            :desc="item.zhaiyao"
            :title="item.title"
            thumb="https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/63bcf275fd8393325c6f343b3c89e5c9.jpg"
          >
            <template #num>
              <span>{{ item.stock_quantity }}人收藏</span>
            </template>
          </van-card>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>
<script>
import { collects } from '@/api/mine';
// import { goodsdetailList } from '@/api/todos';
export default {
  data() {
    return {
      collects: [],
      // collects: [
      //   {
      //     id: 101,
      //     title: '红米Note5 AI 双摄',
      //     titleMsg: '处理器',
      //     add_time: '2018-07-15T11:14:00.000Z',
      //     zhaiyao: '骁龙636处理器，6GB大内存性能提升40%',
      //     click: '299',
      //     img_url: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/8d37ce698ecdc681ba7fd736a7fb1f2c.jpg',
      //     sell_price: 2599,
      //     market_price: 3000,
      //     stock_quantity: '600+',
      //     isdel: 0,
      //     thumb_id: 101,
      //   },
      //   {
      //     id: 102,
      //     title: '红米Note5 AI 双摄',
      //     titleMsg: '专家',
      //     add_time: '2018-07-15T11:14:00.000Z',
      //     zhaiyao: '千元机里面的拍照专家',
      //     click: '3000',
      //     img_url: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/bfb8f59814fa33003e94451eeaba0f9f.jpg',
      //     sell_price: 3788,
      //     market_price: 4000,
      //     stock_quantity: '1000+',
      //     isdel: 0,
      //     thumb_id: 102,
      //   },
      //   {
      //     id: 103,
      //     title: '红米Note5 AI 双摄',
      //     titleMsg: '双摄',
      //     add_time: '2018-07-15T11:14:00.000Z',
      //     zhaiyao: 'AI双摄，梦幻般的背景虚化',
      //     click: '100',
      //     img_url: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/202a31934625738bb2e10dcdd2d28118.jpg',
      //     sell_price: 1999,
      //     market_price: 2200,
      //     stock_quantity: '1000+',
      //     isdel: 0,
      //     thumb_id: 103,
      //   },
      //   {
      //     id: 104,
      //     title: '红米Note5 AI 双摄',
      //     titleMsg: '相机',
      //     add_time: '2018-07-15T11:26:27.000Z',
      //     zhaiyao: '1.4 um超大像素超感光相机',
      //     click: '299',
      //     img_url: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/60318395fb54759e52b81a6a2364d6b0.jpg',
      //     sell_price: 2599,
      //     market_price: 3000,
      //     stock_quantity: '600+',
      //     isdel: 0,
      //     thumb_id: 104,
      //   },
      //   {
      //     id: 105,
      //     title: '红米Note5 AI 双摄',
      //     titleMsg: '焦点',
      //     add_time: '2018-07-15T11:33:13.000Z',
      //     zhaiyao: 'Dual PD 双核极速对焦',
      //     click: '299',
      //     img_url: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/40a4b1aa7d68de23177f74f7f4613001.jpg',
      //     sell_price: 2599,
      //     market_price: 3000,
      //     stock_quantity: '600+',
      //     isdel: 0,
      //     thumb_id: 105,
      //   },
      //   {
      //     id: 106,
      //     title: '红米Note5 AI 双摄',
      //     titleMsg: '品质',
      //     add_time: '2018-07-15T11:33:14.000Z',
      //     zhaiyao: '超过10000项严苛检测红米国民品质',
      //     click: '299',
      //     img_url: 'https://cdn.cnbj0.fds.api.mi-img.com/b2c-mimall-media/93dd8c25afce1b7c088fd39f11db9cd1.jpg',
      //     sell_price: 2599,
      //     market_price: 3000,
      //     stock_quantity: '600+',
      //     isdel: 0,
      //     thumb_id: 106,
      //   },
      // ],
      active: 0,
    };
  },
  created() {
    this.getcollects();
  },
  methods: {
    async getcollects() {
      const res = await collects();
      this.collects = res.data;
    },
  },
};
</script>
<style
  lang="scss"
  scoped
>
.Mycollect {
  margin-top: 46px;
  .content {
    .img-box {
      width: 100%;
      height: 100%;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .van-card__thumb {
    height: 110px;
  }
  .van-card__content {
    min-height: 110px;
    .van-card__title {
      font-weight: 600;
      font-size: 16px;
      max-height: 32px;
      line-height: 32px;
    }
  }
}
</style>
